<template>
	<view class="content" >
		<image class="bg-image" src="../../static/me/img-wode-130-bg@2x.png" mode="scaleToFill"></image>
		<!-- 用户信息 -->
		<view class="box-bgView">
			<view class="user-view">
				<wxAuthAvatar v-if="!isLogin" :haveAuth="!isInfoAv" callBack="mepageWxInfo">
					<wxAuthPhone :haveAuth="!isPhoneAv" callBack="mepageWxPhone">
					<view class="no-login">
						<view class="leftView">
							<image :src="userHeaderUrl" mode="scaleToFill"></image>
							<view class="nikeName">{{nickName}}</view>
						</view>
						<button class="cu-btn btn-login">
								<image src="../../static/me/btn-anniu-100-zhengchang@2x.png" mode="scaleToFill"></image>
								<text>登录</text>
						</button>
					</view>
					</wxAuthPhone>
				</wxAuthAvatar>
				<view class="login" v-if="isLogin">
					<view class="leftView">
						<image :src="userHeaderUrl" style="border: 2px solid #E8A974;" mode="aspectFit"></image>
						<view class="info-view">
							<view class="nick-name">
								{{nickName}}
							</view>
							<view class="key-num">
								<image src="../../static/me/icon-48-yaoshi@2x.png" mode="aspectFit"></image>
								<text>{{`碎片：${totalKeyNum}枚`}}</text>
							</view>
						</view>
					</view>
					<button class="cu-btn btn-share" v-on:click="onJumpSharePage">
							<image src="../../static/me/btn-anniu-100-zhengchang@2x.png" mode="scaleToFill"></image>
							<text>分享成就</text>
					</button>
				</view>

			</view>

		</view>

		<view class="box-bgView" style="margin-top: 50rpx;">
			<view class="treasure-box">
				<!-- 标题 -->
				<view class="top-view-border">
					<view class="top-view">
						<image src="../../static/me/icon-48-baoxiang@2x.png" mode="aspectFit"></image>
						<text>我的宝箱</text>
					</view>
				</view>
				<!-- 提示 -->
				<view class=".tip-view">
					<view v-if="totalKeyNum == 30">
						<text>恭喜你成功开启所有宝箱，现在可去景点逛一逛</text>
					</view>
					<view v-else>
						<text>{{`距离第${boxIndex}个宝箱开启还差${needKeyNum-haveKeyNum}枚钥匙碎片`}}</text>
						<text>{{`${haveKeyNum}/${needKeyNum}`}}</text>
					</view>

				</view>
				<view class="progress">
					<image :style="{left:`${-100 + progress}%`}" src="../../static/me/img-wode-16-jindutiao@2x.png" mode="scaleToFill"></image>
				</view>

				<view class="treasure-view">
					<button class="cu-btn treasure" v-for="(item,index) in treasureList" :key="index" v-on:click="onTreasureClickWithId(index,item.status,item.id,item.prize_type,item)" >
						<image class="treasure-img" :src="item.src" mode="aspectFit"></image>
						<view class="keyong-img" v-if="item.status === 0" >
							开启
						</view>
						<view class="youjiang-img" v-if="item.status === 2 && item.prize_type === 1" >
							领
						</view>
						<image class="kong-img" v-if="item.status === 1" src="../../static/me/icon-wode-40-kong@2x.png" mode="aspectFit"></image>
						<image class="yiyong-img" v-if="item.status != 0 && item.status != -1" src="../../static/me/icon-wode-40-yiyong@2x.png" mode="aspectFit"></image>
					</button>
				</view>

					<button class="cu-btn btn-next" v-on:click="onNextClick">
							<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="scaleToFill"></image>
							<text v-if="totalKeyNum == 30">逛一逛</text>
							<text v-else>继续闯关</text>

					</button>
			</view>

		</view>

		<!-- 打开宝箱 -->
		<view class="dailog_view" v-if="isShowOpened">
			<view class="dailog_screen opened">
				<image class="opened-bg" src="../../static/game/img-renwu-tankuang-980-bg@2x.png" mode="scaleToFill"></image>
				<image class="opened-status-img" :src="prizeImg|| openList[openStatus - 1].img" mode="aspectFit"></image>
				<view :class="['opened-status-desc-area',openStatus == 3 ?'has-desc':'']">
					<view class="opened-status-status" ><text>{{prizeDesc}}</text></view>
					<view class="opened-status-desc" v-if="openStatus == 3">
						{{prizeDescription}}
					</view>
				</view>

				<!-- <view class="opened-status-status" ><text>{{openList[openStatus - 1].detail}}</text></view> -->
				<button class="cu-btn btn-next" @click="onLingJiang">
					<image src="../../static/me/btn-anniu-130-zhengchang@2x.png" mode="aspectFit"></image>
					<text v-if="haveKeyNum == 30 ">逛一逛</text>
					<text v-else>{{openList[openStatus - 1].btnText}}</text>
				</button>
			</view>
			<view class="background_screen" ></view>
	</view>
	</view>
</template>

<script>
let app = getApp();
import {toast,strPlusXing} from "../../utils/util.js"
import {
		playMp3,
	getNextPoint
} from "../../tool/pubTool.js"
import {
	isLoginOk,
	getUserInfo,
	getUserBoxList,
	getUserBoxOpen
} from "../../tool/userTool.js"

export default {
	data() {
		return {
			prizedata:'', // 获奖的作品
			isInfoAv:false,
			isPhoneAv:false,
			isLogin: isLoginOk(),
			userHeaderUrl:'../../static/index/user_head_nomal.png',
			nickName: "未登录",
			totalKeyNum:0, // 总获取钥匙数
			haveKeyNum:0, // 进度 第几个钥匙了
			needKeyNum:10, //总数量
			boxIndex:1, // 第几个宝箱
			progress:0, // 进度条1-100;
			treasureList:[],

			isShowOpened:false,
			boxId:null,
			openStatus:1,
			prizeDesc: '', // 其实是商品名
			prizeImg: '', // 新增加的奖品图片
			prizeDescription: "", // 兑换的说明
			openList : [
				{
					img:
						"https://file-oss.putaocdn.com/minhangwenchuang/game/img-renwu-300-menpiao-weizhongjiang@2x.png",
					status: 1,
					detail:
						"很遗憾，本次宝箱内未抽中奖品，你还有机会从下一个宝箱内获得，快点完成任务开启下一个宝箱吧",
					btnText: "继续闯关"
				},
				{
					img:
						"https://file-oss.putaocdn.com/minhangwenchuang/game/img-renwu-300-menpiao-keyong@2x.png",
					status: 2,
					detail:
						"恭喜你获得“锦江乐园”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。",
					btnText: "查看服务点"
				},
				{
					img:
						"https://file-oss.putaocdn.com/minhangwenchuang/game/img_leyu_shizi_peitu@2x.png",
					status: 3,
					detail: "恭喜你，获得闵行区文创产品一套，快去填写收货信息吧。",
					btnText: "领取奖品"
				}
			]
		};
	},
	computed(){

	},
	async onLoad(option) {
		await this.$onLaunched;
		uni.$on('mepageWxInfo',this.checkLogin)
		uni.$on('mepageWxPhone',this.checkLogin)
		this.checkLogin();

	},
	onUnload() {
		uni.$off('mepageWxInfo',this.checkLogin)
		uni.$off('mepageWxPhone',this.checkLogin)
	},
	onShow() {

		this.getUserInfo()
	},
	methods: {
		onLingJiang(){
			this.isShowOpened = false;

			if(this.openStatus === 1){
				this.onNextClick();
			}else if (this.openStatus === 2){
				uni.navigateTo({
					url:"/pages/addressList/addressList"
				})
			}else if (this.openStatus === 3){
				uni.navigateTo({
					url:`/pages/receiveAward/receiveAward?boxId=${this.boxId}&itemStr=${JSON.stringify(this.prizedata)}`
				})
			}
		},
	    checkLogin(){
			if(app.globalData.phoneNum != null){
				this.userHeaderUrl = app.globalData.wxUserInfo.avatarUrl;
				this.nickName = strPlusXing(app.globalData.phoneNum,3,4)
				this.isLogin = true;
				this.isPhoneAv = true;
			}else{
				this.isLogin = false;
				if(app.globalData.wxUserInfo){
					this.userHeaderUrl = app.globalData.wxUserInfo.avatarUrl;
					this.nickName = app.globalData.wxUserInfo.nickName;
					this.isPhoneAv = false;
					this.isInfoAv = true;
				}else{
					this.isInfoAv = false;
				}
			}
		},
		async getUserBoxList(){
			let res = await getUserBoxList();

			let list = [
				{id:1,status:-1,src:"../../static/me/img-wode-baoxiang-140-bukeyong@2x.png"},
				{id:2,status:-1,src:"../../static/me/img-wode-baoxiang-140-bukeyong@2x.png"},
				{id:3,status:-1,src:"../../static/me/img-wode-baoxiang-140-bukeyong@2x.png"}];
			if(this.totalKeyNum >= 10){ // 可用
				list[0].status = 0;
				list[0]["src"] = "../../static/me/img-wode-baoxiang-140-keyong@2x.png"
			}
			if(this.totalKeyNum >= 20){ // 可用
				list[1].status = 0;
				list[1]["src"] = "../../static/me/img-wode-baoxiang-140-keyong@2x.png"
			}
			if(this.totalKeyNum  == 30 ){ // 可用
				list[2].status = 0;
				list[2]["src"] = "../../static/me/img-wode-baoxiang-140-keyong@2x.png"
			}

			if(res){
				res.forEach( (d,i) =>{
					// list[d] = d;
					if(d.status == 1){ // 未中奖
						d["src"] = "../../static/me/img-wode-baoxiang-140-kongxiang@2x.png"
					}
					if(d.status == 2 || d.status == 3 || d.status == 4 ){ // 中奖
						d["src"] = "../../static/me/img-wode-baoxiang-140-youjiang@2x.png"
					}
					list[d.box_no - 1] = d
				})
			}

			const length = res?res.length:0;
			this.treasureList = list;
			this.boxIndex = Math.ceil(this.totalKeyNum / 10) ; // 第几个宝箱
			if(this.boxIndex === length){
				this.boxIndex = this.boxIndex + 1;
			}
			if(this.boxIndex >= 3){
				this.boxIndex = 3
			}
			this.haveKeyNum =  this.totalKeyNum - ((this.boxIndex - 1)  *10); // 进度 第几个钥匙了
			this.progress = this.haveKeyNum * 10;// 进度条1-100;
			// let opened_box_num = res.opened_box_num;
			// let box_num = res.box_num;
			// let win_num = res.win_num;
			// this.totalKeyNum = res.key_num;
		},
		async getUserInfo(){
			let res = await getUserInfo();
			let opened_box_num = res.opened_box_num;
			let box_num = res.box_num;
			let win_num = res.win_num;
			this.totalKeyNum = res.key_num;
			await this.getUserBoxList();
			await this.checkLogin()
		},
		onJumpSharePage(){
			uni.navigateTo({
				url:"/pages/share/share"
			})
		},
		//点击宝箱
		onTreasureClickWithId(index,status,id,type,item){
			console.log(item, 'item')
			// this.openBoxPost(index);
			if(status === -1){
				return;
			}
			if(status === 0){
				this.openBoxPost(index);
			}
			if(status === 1){
				this.isShowOpened = true;
				this.openStatus = 1;
				this.prizeDesc= '很遗憾，本次宝箱内未抽中奖品，你还有机会从下一个宝箱内获得，快点完成任务开启下一个宝箱吧'
			}
			if(status=== 2){
				if(type === 1){
					let itemStr = JSON.stringify(item);
					uni.navigateTo({
						url:`/pages/receiveAward/receiveAward?boxId=${id}&itemStr=${itemStr}`
					})
				}else if (type === 2){
					this.isShowOpened = true;
					this.openStatus = 2;
					this.prizeDesc= `恭喜你获得“${item.prize_name}”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。`
					// uni.navigateTo({
					// 	url:"/pages/addressList/addressList"
					// })
				}

			}
			if(status=== 3 || status=== 4){
				let itemStr = JSON.stringify(item);
				if(type === 1){
					uni.navigateTo({
						url:`/pages/receiveAward/receiveAward?boxId=${id}&itemStr=${itemStr}`
					})
				}else if (type === 2){
					this.isShowOpened = true;
					this.openStatus = 2;
					this.prizeDesc= `恭喜你获得“${item.prize_name}”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。`
					// uni.navigateTo({
						// url:"/pages/addressList/addressList"
					// })
				}
			}

		},
		async openBoxPost(index,status){
			let res = await getUserBoxOpen({
				params:{
					"box_no":index + 1
				}
			});
			// let res = {
			// 	prize_name: "",
			// 	prize_type: 2, //中奖类型
			// 	status: 1,  //  0未开奖 1 未中奖 2 中奖未领取 3 已领取待发货 4已发货
			// 	user_treasure_box_id: 0,
			// };
			this.isShowOpened = true;
			if(res.status === 1){
				this.openStatus = 1;
				this.prizeDesc= '很遗憾，本次宝箱内未抽中奖品，你还有机会从下一个宝箱内获得，快点完成任务开启下一个宝箱吧'
				this.prizeDescription = res.description // 备注部分
				this.prizeImg = res.img_url
			}
			if(res.status === 2 || res.status === 3||res.status === 4){
				this.prizedata = res
				if(res.prize_type === 2){
					this.openStatus = 2;
					this.prizeDesc= `恭喜你获得“${res.prize_name}”门票一张，可前往相关兑换服务网点凭借手机号码进行兑换，门票有限期1年。`
					this.prizeDescription = res.description // 备注部分
					this.prizeImg = res.img_url
				}
				if(res.prize_type === 1){
					this.openStatus = 3;
					this.boxId = res.user_treasure_box_id;
					this.prizeDesc = `恭喜你，获得${res.prize_name}一套，快去填写收货信息吧。`
					this.prizeDescription = res.description // 备注部分
					this.prizeImg = res.img_url
				}
			}
		},
		onNextClick(){
			// let nextList = getNextPoint();
			// if(nextList.length > 0){
			// 	uni.redirectTo({
			// 		url:`/pages/attractionDetail/attractionDetail?id=${nextList[0]}`
			// 	})
			// }
			uni.reLaunch({
				url:`/pages/index/index`
			})
		}

	}
};
</script>

<style lang="stylus">
	page{
		background-color #CEA175
		height 100%
		width 100%
	}

	.content{
		position relative
		height 100%
		width 100%
		display flex
		flex-direction column
		align-items center
		.bg-image{
			width 100%
			height 130rpx
			display block
		}
		.box-bgView{
			margin-top 40rpx
			background: #F9E5A1;
			box-shadow: 0 8rpx 14rpx 5rpx rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
			border-radius: 20rpx;
			width 710rpx
			.user-view{
				width 670rpx
				height 160rpx
				margin 20rpx
				background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
				border: 2rpx solid #E8A974;
				border-radius: 12rpx;
				.no-login,.login{
					display flex
					align-items center
					justify-content space-between
					padding 32rpx 40rpx
					height 160rpx
					.leftView{
						position relative
						display flex
						align-items center
						>image{
							width 96rpx
							height 96rpx
							border-radius 50%
						}
						.nikeName{
							margin-left 8rpx
							font-family PingFangSC-Semibold
							font-size 28rpx
							color: #844425
							letter-spacing 0.14rpx
							max-width 200rpx
						}
						.info-view{
							position relative
							display flex
							flex-direction column
							align-items flex-start
							margin-left 10rpx
							.nick-name{
								font-family: PingFangSC-Semibold;
								font-size: 30rpx;
								color: #844425;
								letter-spacing: 0.15rpx;
								padding-bottom 14rpx
							}
							.key-num{
								display flex
								align-items center

								>image{
									width 48rpx
									height 48rpx
									display block
								}
								>text{
									margin-left 6rpx
									font-family: FZY3K--GBK1-0;
									font-size: 24rpx;
									color: #844425;
									letter-spacing: 0.12px;
								}
							}
						}
					}
					.btn-login,.btn-share{
						width 180rpx
						height 90rpx
						position relative;
						>image{
							position absolute;
							left 0;
							top 0;
							width 100%;
							height 100%;
							display block
						}
						>text{
							position relative
							font-size: 26rpx;
							color: #FFFFFF;
							letter-spacing: 4prx;
							line-height 90rpx
						}
					}
				}


			}
			.treasure-box{
				width 670rpx
				height 544rpx
				margin 20rpx
				background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
				border: 2rpx solid #E8A974;
				border-radius: 12rpx;
				display flex
				flex-direction column
				align-items center
				.top-view-border{
					position relative;
					top -50rpx
					background: #F9E5A1;
					box-shadow: 0 7rpx 9rpx 0 rgba(165,79,49,0.68);
					border-radius: 42rpx;
					.top-view{
						margin 13rpx
						width 228rpx
						height 58rpx
						background: #C6784A;
						box-shadow: 0 1rpx 1rpx 0 #F8BC93, inset 0 6rpx 0 0 rgba(132,68,37,0.51);
						border-radius: 29rpx;
						display flex
						align-items center
						justify-content center
						>image{
							width 48rpx
							height 48rpx;
							display block
							margin-right 13rpx
						}
						>text{
							font-family: FZY4K--GBK1-0;
							font-size: 30rpx;
							color: #FBE893;
							letter-spacing: 0.15rpx;
						}
					}
				}
				.tip-view{
					display flex
					flex-direction row
					justify-content space-between
					align-items center
					font-family: PingFangSC-Semibold;
					font-size: 28rpx;
					color: #844425;
					letter-spacing: 0.14rpx;
					width 582rpx
				}
				.progress{
					margin-top 32rpx;
					width 590rpx;
					height 24rpx;
					background: #C6784A;
					box-shadow: 0 1px 1px 0 #F8BC93, inset 0 4rpx 0 0 rgba(132,68,37,0.51);
					border-radius: 12rpx;
					position relative
					overflow hidden;
					border 4rpx solid #C6784A
					>image{
						width 582rpx;
						height 16rpx;
						display block
						position relative
					}
				}
				.treasure-view{
					display flex
					flex-direction row
					justify-content space-around
					align-items center
					width 100%;
					margin-top 50rpx
					.treasure{
						width 140rpx
						height 140rpx
						position relative
						.treasure-img{
							width 100%
							height 100%
							display block
							position absolute;
							left 0;
							top 0;
						}
						.keyong-img,.youjiang-img{
							position absolute
							right 0
							top 0
							background: #F3444B;
							border: 2px solid #FFFFFF;
							box-shadow: 0 5rpx 11rpx 0 rgba(243,68,75,0.67);
							border-radius: 19.5rpx
							font-family: PingFangSC-Semibold;
							font-size: 20rpx;
							color: #FFFFFF;
							letter-spacing: 0.1rpx;
							line-height: 20rpx;
							padding 5rpx 5rpx
							width 64rpx
							height 36rpx;
						}
						.kong-img,.yiyong-img{
							width 40rpx;
							height 40rpx;
							display block;
							position absolute;
							right 0;
							bottom 0;
						}
					}
				}
				.btn-next{
					margin-top 20rpx
					width 350rpx
					height 130rpx
					position relative;
					>image{
						position absolute;
						left 0;
						top 0;
						width 100%;
						height 100%;
						display block
					}
					>text{
						position relative
						font-family: PingFangSC-Semibold;
						font-size: 36rpx;
						color: #FFFFFF;
						letter-spacing: 5.544px;
						line-height 130rpx
					}
				}
			}
		}
		.opened{
			display flex
			flex-direction column
			justify-content flex-start
			align-items center
			background-color rgba(0,0,0,0)
			width 680rpx
			height 980rpx
			position relative
			.opened-bg{
				position absolute
				left 0;
				top 0;
				width 100%;
				height 100%
			}
			.opened-status-img{
				margin-top 290rpx
				width 540rpx
				height 300rpx
				display block
			}
			.opened-status-desc-area{
				.opened-status-status{
					position relative
					min-height 120rpx
					display flex
					align-items center
					justify-content center
					margin-bottom 30px
					>text{
						font-family: PingFangSC-Semibold;
						width 500rpx
						font-size: 28rpx;
						color: #844425;
						letter-spacing: 0.14rpx;
						line-height 36rpx
						text-align left
					}
				}

				&.has-desc{
					.opened-status-status{
						min-height 78rpx
						margin-bottom 0
					}
					.opened-status-desc{
						position relative
						background: #F4F5CB;
						border-radius: 12px;
						font-family: PingFangSC-Regular;
						font-size: 11px;
						color: #844425;
						letter-spacing: 0;
						text-align: center;
						padding 8.5px 16px
						margin-top 6px;
						width 500rpx
					}
				}
			}

			.btn-next{
				width 350rpx
				height 130rpx
				position relative
				// margin-top 30rpx
				>image{
					position absolute
					left 0
					top 0
					width 100%
					height 100%
					display block
				}
				>text{
					position relative
					font-family: PingFangSC-Semibold;
					font-size: 36rpx;
					color: #FFFFFF;
					letter-spacing: 5.54rpx;
				}
			}
		}
	}

</style>
